<template>
  <v-app theme="dark" density="compact"
         variant="solo">
    <v-app-bar  @dblclick="editTitle">
      <v-app-bar-title v-if="!editingTitle">{{file.title}}</v-app-bar-title>
      <div v-else style="width: 100%">
        <v-text-field density="compact"
                      variant="solo" v-model="editedTitle" hide-details="auto" label="Editing title" @keydown.enter="saveTitle" style="width: 100%"/>
      </div>
    </v-app-bar>

    <v-navigation-drawer permanent>
      <DataManager ref="dataManager"/>
    </v-navigation-drawer>

    <v-main style="min-height: 300px;">
      <Monaco/>
    </v-main>

    <v-navigation-drawer color="surface" location="right" permanent>
      <CustomTags/>
    </v-navigation-drawer>
  </v-app>
</template>

<script setup>
import DataManager from "@/components/DataManager.vue";
import Monaco from "@/components/Monaco.vue";
import CustomTags from "@/components/CustomTags.vue";
import {provide, ref} from 'vue';

const editingTitle = ref(false);
const editedTitle = ref('');
const dataManager = ref();
const customTags = ref({});
const file = ref({
  id: '',
  title: '',
  description: '',
  type: '',
  prompt: '',
  nPrompt: ''
});

function editTitle(){
  editingTitle.value = (file.value.id=='')?false:true;
  if(editingTitle.value){
    editedTitle.value=file.value.title;
  }
}
function saveTitle() {
  file.value.title = editedTitle.value
  console.log(file.value.title )
  editingTitle.value = false
  editedTitle.value = ''
  dataManager.value.saveFile()
}

provide("file", file)
provide("customTags",customTags)

</script>
